<template>
  <div>
    <!-- 2.6使用status渲染 -->
    <el-dialog
      :title="status.isAdd ? '规格添加' : '规格编辑'"
      :visible.sync="status.isshow"
      @closed="closed"
    >
      <!-- 6.4 绑定数据到表单 -->
      <el-form :model="form">
        form: {{ form }}
        <div>arr:{{ arr }}</div>
        <el-form-item label="规格名称" label-width="120px">
          <el-input v-model="form.specsname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="规格属性"
          label-width="120px"
          v-for="(item, index) in arr"
          :key="index"
        >
          <div class="line">
            <el-input v-model="item.value" autocomplete="off"></el-input>
            <!-- 点击新增，给arr添加一条数据 -->
            <el-button
              type="primary"
              v-if="index == 0"
              @click="arr.push({ value: '' })"
              >新增规格属性</el-button
            >
            <!-- 点击删除。删除arr一条数据 -->
            <el-button type="danger" v-else @click="arr.splice(index, 1)"
              >删除</el-button
            >
          </div>
        </el-form-item>

        <el-form-item label="状态" label-width="120px">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" v-if="status.isAdd" @click="add"
          >添 加</el-button
        >
        <el-button type="primary" v-else @click="update">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/* 
1.静态页 略
2. 数据交互的api
3.列表 ：vuex 
4.添加
  4.1 表单初始值 绑定到页面
  4.3 规格属性
  4.3 添加 逻辑
   
5.删除
6.编辑
7.修改
8.分页：vuex

*/
import { reqspecsadd, reqspecsedit, reqspecsinfo } from "../../../http/api";
import { errorAlert, successAlert } from "../../../utils/alert";
import { mapGetters, mapActions } from "vuex";

export default {
  components: {},
  props: ["status"],
  data() {
    return {
      // 2.1 初始化form 绑定到页面
      form: {
        specsname: "",
        attrs: "",
        status: 1,
      },
      //规格属性
      arr: [
        {
          value: "",
        },
        {
          value: "",
        },
      ],
    };
  },
  computed: {
    ...mapGetters({}),
  },
  mounted() {},
  methods: {
    ...mapActions({
      reqList: "specs/reqList",
    }),

    //2.7点了取消
    cancel() {
      this.status.isshow = false;
    },
    //2.4 清空
    empty() {
      this.form = {
        specsname: "",
        attrs: "",
        status: 1,
      };
      //2.4.1 规格属性单独处理
      this.arr = [
        {
          value: "",
        },
        {
          value: "",
        },
      ];
    },
    //验证数据
    checkedData() {
      return new Promise((resolve) => {
        if (this.form.specsname === "") {
          errorAlert("规格不能为空");
          return;
        }
        if (this.arr.some((item) => item.value === "")) {
          errorAlert("规格属性均不能为空");
          return;
        }

        //[{value:1},{value:2},{value:3},{value:3}]
        let newArr = this.arr.map((item) => item.value); //[1,2,3,3]
        let newSetArr = Array.from(new Set(newArr)); //[1,2,3]

        if (newSetArr.length != this.arr.length) {
          errorAlert("规格属性需要唯一");
          return;
        }
        resolve();
      });
    },
    // 2.3添加
    add() {
      this.checkedData().then(() => {
        // 将arr的值取出来，给form.attrs
        // arr:[ { "value": "白色" }, { "value": "黑色" }, { "value": "红色" } ]--['白色','黑色','红色']---->"白色,黑色,红色"
        this.form.attrs = this.arr.map((item) => item.value).join(",");

        reqspecsadd(this.form).then((res) => {
          if (res.data.code === 200) {
            // 弹成功
            successAlert(res.data.msg);
            // 数据清空
            this.empty();
            // 弹框消失
            this.status.isshow = false;
            // // 列表刷新----------此处调用vuex的方法------------------
            this.reqList();
          }
        });
      });
    },

    //7.3点击了编辑按钮 ，获取一条数据
    getOne(id) {
      reqspecsinfo({
        id: id,
      }).then((res) => {
        if (res.data.code === 200) {
          /*
           attrs: (3) ["白色", "红色", "黑色"]-->[{value:"白色"},{value:"红色"},{value:"黑色"}]
            id: 8
            specsname: "颜色"
            status: 1
          */
          this.form = res.data.list[0];
          // form.attrs: (3) ["白色", "红色", "黑色"]-->[{value:"白色"},{value:"红色"},{value:"黑色"}]
          this.arr = this.form.attrs.map((item) => ({ value: item }));
        }
      });
    },
    //8.1修改逻辑
    update() {
      this.checkedData().then(() => {
        // 将arr的值取出来，给form.attrs
        this.form.attrs = this.arr.map((item) => item.value).join(",");
        reqspecsedit(this.form).then((res) => {
          if (res.data.code == 200) {
            successAlert(res.data.msg);
            this.empty();
            this.status.isshow = false;
            this.reqList();
          }
        });
      });
    },
    // 9.弹框关闭
    closed() {
      // 如果是添加的取消，什么都不做；如果是编辑的取消，form清空
      if (!this.status.isAdd) {
        this.empty();
      }
    },
  },

  watch: {},
};
</script>
<style scoped lang="less">
@import "../../../less/index.less";
.line {
  display: flex;
}
.line .el-input {
  flex: 1;
}
</style>

